<template>
  <div class="polyline">
    <div class="polyline-top">
      <span>
        绘制线
      </span>
      <el-popover
          class="polyline-help"
          placement="top-end"
          title="帮助说明"
          width="250"
          trigger="click"
          content="点击'选择区域'后，鼠标左键在模型中多次点击绘制线，鼠标右键完成绘制">
        <el-button slot="reference"><i class="ri-question-line"></i></el-button>
      </el-popover>
    </div>
    <div class="polyline-divider">
      <el-divider>
        <i class="ri-pencil-line"></i>
      </el-divider>
    </div>
    <div class="polyline-data">
      <el-form ref="polylineData" :model="polylineObj" label-width="140px">
        <el-form-item label="折线ID">
          <el-select v-model="polylineIndex" placeholder="请选择" @change="changePolyline">
            <el-option
                v-for="(item,index) in polylineLists"
                :key="item.id"
                :label="'画线'+(index+1)"
                :value=index>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="折线颜色" class="color">
          <el-color-picker color-format="rgb" v-model="polylineObj.color"></el-color-picker>
        </el-form-item>
        <el-form-item label="可视范围">
          <el-input-number v-model="polylineObj.range[0]" :step="1" :max="2000" :min="1"></el-input-number>
          <el-input-number v-model="polylineObj.range[1]" :step="1" :max="1000000" :min="3000"></el-input-number>
        </el-form-item>
        <el-form-item label="线宽">
          <el-input-number v-model="polylineObj.thickness" :step="1" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="亮度">
          <el-input-number v-model="polylineObj.intensity" :step="0.1" :min="0" :max="1000"></el-input-number>
        </el-form-item>
        <el-form-item label="流速">
          <el-input-number v-model="polylineObj.flowRate" :step="0.1" :min="0" :max="1.0"></el-input-number>
        </el-form-item>
        <el-form-item label="是否做深度检测">
          <el-switch v-model="polylineObj.depthTest"></el-switch>
        </el-form-item>
        <el-form-item label="样式">
          <el-radio-group v-model="polylineObj.shape ">
            <el-radio :label="0">直线</el-radio>
            <el-radio :label="1">曲线</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="折线样式">
          <el-select v-model="polylineObj.style" placeholder="请选择">
            <el-option
                v-for="item in polylineStyle"
                :key="item.value"
                :label="item.labelLeft"
                :value="item.value"
            >
              <span style="float: left">{{ item.labelLeft }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.labelRight }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="polyline-btn">
      <el-button @click="selectPolyline()">选择区域</el-button>
      <el-button @click="delPolyline()">删除</el-button>
      <el-button @click="closePolyline()">关闭</el-button>
      <el-button @click="upPolyline()">更新</el-button>
    </div>
  </div>
</template>
<style lang="scss">
@import '@/css/polyline/polylinePopup';
</style>
<script>
/* eslint-disable */
import 'remixicon/fonts/remixicon.css'

export default {
  // inject: ['reload'],
  name: 'polylinePopup',
  props: {
    polylineLists: {
      type: Array,
    },
    polylineIds: {
      type: Array,
    },
  },
  data() {
    return {
      polylineIndex: null,
      polylineObj: {
        id: null,//折线唯一标识id
        color: 'rgb(220,20,60)',//折线颜色绿色 半透明
        range: [1, 1000000],//可视范围：[近裁距离, 远裁距离]，取值范围: [任意负值, 任意正值]
        thickness: 20,//折线宽度
        intensity: 0.5,//亮度
        flowRate: 0.5,//流速
        depthTest: false,//是否做深度检测 开启后会被地形高度遮挡
        shape: 0, //折线类型 0：直线， 1：曲线  注意：设置为曲线非常影响添加效率
        style: 6,//折线样式 参考样式枚举：polylineStyle
      },
      polylineStyle: [
        {
          value: 0,
          labelLeft: '箭头样式1',
          labelRight: 'Arrow1',
        },
        {
          value: 1,
          labelLeft: '箭头样式2',
          labelRight: 'Arrow2',
        },
        {
          value: 2,
          labelLeft: '流动线',
          labelRight: 'Flow',
        },
        {
          value: 3,
          labelLeft: '光流',
          labelRight: 'Beam',
        },
        {
          value: 4,
          labelLeft: '固定线条',
          labelRight: 'Normal',
        },
        {
          value: 6,
          labelLeft: '普通虚线',
          labelRight: 'DottedNormal',
        },
        {
          value: 7,
          labelLeft: '圆点虚线',
          labelRight: 'DottedCircle',
        },
      ],
    }
  },
  methods: {
    extractRGBComponents(colorString) {
      let rgbRegExp = /rgb\((\d+),\s*(\d+),\s*(\d+)\)/;
      let match = colorString.match(rgbRegExp);
      if (match) {
        return [parseInt(match[1]) / 255, parseInt(match[2]) / 255, parseInt(match[3]) / 255];
      } else {
        return null;
      }
    },
    selectPolyline() {
      __g.editHelper.setParam(this.polylineObj.shape, 0)
      __g.editHelper.start();
    },
    async addPolyline(coordinates) {
      const timestamp = new Date().getTime();
      let id = 'polyline' + timestamp
      let color = this.extractRGBComponents(this.polylineObj.color)
      let obj = {
        id: id,
        color: color,
        coordinates: coordinates,
        range: this.polylineObj.range,
        thickness: this.polylineObj.thickness,
        intensity: this.polylineObj.intensity,
        flowRate: this.polylineObj.flowRate,
        depthTest: this.polylineObj.depthTest,
        shape: this.polylineObj.shape,
        style: this.polylineObj.style,
      }
      this.polylineLists.push(obj)
      this.polylineIndex = this.polylineLists.length - 1
      this.polylineIds.push(id)
      await __g.polyline.add(obj);
      this.polylineObj.id = id
    },
    delPolyline() {
      if (this.polylineObj.id) {
        __g.polyline.delete(this.polylineObj.id);
        this.polylineLists.splice(this.polylineIndex, 1)
        this.polylineIds.splice(this.polylineIndex, 1)
        if (this.polylineLists.length !== 0) {
          this.polylineIndex = this.polylineLists.length - 1
          this.changePolyline()
        } else {
          this.reloadPolyline()
        }
      } else {
        this.$message.warning("未选择删除的对象")
      }
    },
    closePolyline() {
      this.$emit('close-popup');
      this.reloadPolyline()
    },
    reloadPolyline() {
      this.polylineIndex = null
      this.polylineObj = {
        id: null,//折线唯一标识id
        color: 'rgb(220,20,60)',//折线颜色绿色 半透明
        range: [1, 1000000],//可视范围：[近裁距离, 远裁距离]，取值范围: [任意负值, 任意正值]
        thickness: 20,//折线宽度
        intensity: 0.5,//亮度
        flowRate: 0.5,//流速
        depthTest: false,//是否做深度检测 开启后会被地形高度遮挡
        shape: 0, //折线类型 0：直线， 1：曲线  注意：设置为曲线非常影响添加效率
        style: 6,//折线样式 参考样式枚举：polylineStyle
      }
    },
    upPolyline() {
      this.$message.success("开发中")
    },

    changePolyline() {
      let color = this.convertRGBArrayToRGB(this.polylineLists[this.polylineIndex].color)
      console.log(color)
      this.polylineObj = {
        id: this.polylineLists[this.polylineIndex].id,
        color: color,
        coordinates: this.polylineLists[this.polylineIndex].coordinates,
        range: this.polylineLists[this.polylineIndex].range,
        thickness: this.polylineLists[this.polylineIndex].thickness,
        intensity: this.polylineLists[this.polylineIndex].intensity,
        flowRate: this.polylineLists[this.polylineIndex].flowRate,
        depthTest: this.polylineLists[this.polylineIndex].depthTest,
        shape: this.polylineLists[this.polylineIndex].shape,
        style: this.polylineLists[this.polylineIndex].style,
      }
    },
    convertRGBArrayToRGB(rgbArray) {
      let r = Math.round(rgbArray[0] * 255);
      let g = Math.round(rgbArray[1] * 255);
      let b = Math.round(rgbArray[2] * 255);
      return `rgb(${r}, ${g}, ${b})`;
    },
  },
  mounted() {

  }
}
</script>